<template>
  <div style="height: 100%" class="echarts_box">
    <div style="height: 100%" class="chart" ref="chart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lineChart: null,
      radio: 2,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      seriesData: [5, 20, 40, 10, 10, 20, 11, 13, 2, 17, 21, 12],
    };
  },
  methods: {
    handleRaiod(val) {
      switch (val) {
        case 2:
          this.seriesData = [5, 20, 40, 10, 10, 20, 11, 13, 2, 17, 21, 12];
          this.data = [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ];
          break;
        case 1:
          this.seriesData = [5, 20, 40, 10];
          this.data = ["2018年", "2019年", "2020年", "2021年"];
          break;
        default:
          break;
      }
      this.init();
    },
    init() {
      var option = {
        title: {
          text: "设备报警趋势图",
          textStyle: {
            //图例文字的样式
            color: "aqua",
            fontSize: 18,
            fontWeight: "400",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          x: "right", //可设定图例在左、右、居中
          data: ["所有故障", "停机故障"],
          textStyle: {
            //图例文字的样式
            color: "aqua",
            fontSize: 16,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              //轴上文字
              color: "aqua", //颜色
            },
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "aqua", //轴字体
            },
          },
        },
        series: [
          {
            name: "所有故障",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210, 210, 210, 110, 20, 20],
          },
          {
            name: "停机故障",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310, 310, 10, 110, 210, 100],
          },
        ],
      };
      this.$nextTick(() => {
        this.lineChart = this.$echarts.init(this.$refs.chart);
        console.log("lineChart :>> ", this.lineChart.setOption);
        //   option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        //   option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
        //   option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
        //   option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
        this.lineChart.setOption(option);
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang='scss'>
.echarts_box {
  position: relative;
  .echarts_title_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    /deep/ .el-radio__label {
      color: #fff;
    }
    .echarts_title {
      color: #fff;
    }
  }
  .dec_3 {
    position: absolute;
    top: 6px;
    left: 10px;
  }
  .chart {
    width: 100%;
    /* height: 260px; */
  }
}
</style>